<template>
  <div>
    <!-- 导航返回 -->
    <van-nav-bar @click-left="back" class='sticky'>
      <template #left>
        <van-icon name="arrow-left" color="black" size="22" />
      </template>
    </van-nav-bar>
    <!-- 影院信息 -->
    <template v-if="cinemaList">
      <!-- 影院标题 -->
      <div class="title">{{ cinemaList.name }}</div>
      <!-- 影院服务 -->
      <div class="tags">
        <div class="services">
          <div v-for="data in cinemaList.services" :key="data.name">
            {{ data.name }}
          </div>
          <i class="iconfont icon-jiantou_liebiaoxiangyou_o"></i>
        </div>
      </div>
      <!-- 影院地址信息 -->
      <div class="address">
          <i class='iconfont icon-wxbdingwei'></i>
          <div>{{cinemaList.address}}</div>
          <a href="#">
            <i class='iconfont icon-dianhua'></i>
          </a>
      </div>
    </template>
    <router-view></router-view>
  </div>
</template>
<script>
import http from '@/util/http'
import { mapMutations } from 'vuex'
import mixins from '@/util/mixins'
export default {
  mixins: [mixins],
  data () {
    return {
      cinemaList: null
    }
  },
  methods: {
    ...mapMutations(['clearFilmList']),
    back () {
      this.clearFilmList()
      this.$router.push('/cinemas')
    }
  },
  mounted () {
    http({
      url: `/gateway/?cinemaId=${this.$route.params.cinemaId}&k=5042904`,
      headers: {
        'X-Host': 'mall.film-ticket.cinema.info'
      }
    }).then((res) => {
      this.cinemaList = res.data.data.cinema
    })
  }
}
</script>
<style lang="scss" scoped>
.sticky{
  position: sticky;
  top:0;
  z-index: 999;
  background: none;
}
.title {
  height: 44px;
  text-align: center;
  line-height: 44px;
  padding: 0 15px;
  font-size: 16px;
  position: sticky;
  top:0;
  z-index: 998;
  background: white;
}
.tags {
  padding: 5px 0 15px;
  .services {
    font-size: 10px;
    color: #ffb232;
    display: flex;
    justify-content: center;
    align-items: center;
    div {
      border: 1px solid #ffb232;
      padding: 0 4px;
      margin: 0 2.5px;
    }
  }
}
.address{
    height: 50px;
    display: flex;
    padding-left:15px;
    overflow: hidden;
    align-items: center;
    >i{
        font-size: 21px;
    }
    div{
        height:20px;
        font-size: 14px;
        line-height: 20px;
        flex:1;
        padding: 0 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    a{
        display: block;
        width: 67px;
        text-align: center;
        i{
            font-size: 21px;
            color:black;
        }
    }
}
</style>
